<template>
  <a-modal
    :title="title"
    :width="1200"
    :height="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <div class="html">
      <div class="body">
        <div class="left">
          <div id="divPlugin" class="plugin"></div>
          <fieldset class="ipparse" style="display: none">
            <legend>设备IP解析</legend>
            <table cellpadding="0" cellspacing="3" border="0">
              <tr>
                <td class="tt">模式</td>
                <td colspan="3">
                  <select id="devicemode" class="sel" onchange="changeIPMode(this.value);">
                    <option value="1">IPServer</option>
                    <option value="2">HiDDNS</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td class="tt">服务器地址</td>
                <td><input id="serveraddress" type="text" class="txt" value="" /></td>
                <td class="tt">端口号</td>
                <td><input id="serverport" type="text" class="txt" value="7071" /></td>
              </tr>
              <tr>
                <td class="tt">设备标识</td>
                <td><input id="deviceid" type="text" class="txt" value="" /></td>
                <td class="tt">&nbsp;</td>
                <td><input type="button" class="btn" value="获取设备IP" onclick="clickGetDeviceIP();" /></td>
              </tr>
            </table>
          </fieldset>
          <fieldset class="login">
            <legend>登录</legend>
            <table cellpadding="0" cellspacing="3" border="0">
              <tr>
                <td class="tt">IP地址</td>
                <td><input id="loginip" type="text" class="txt" value="" /></td>
                <td class="tt">端口号</td>
                <td><input id="port" type="text" class="txt" value="" /></td>
              </tr>
              <tr>
                <td class="tt">用户名</td>
                <td><input id="username" type="text" class="txt" value="" /></td>
                <td class="tt">密码</td>
                <td><input id="password" type="password" class="txt" value="" /></td>
              </tr>
              <tr>
                <td class="tt">设备端口</td>
                <td colspan="2"><input id="deviceport" type="text" class="txt" value="${chargingSite.deviceport}" />（可选参数）</td>
                <td>
                  窗口分割数&nbsp;
                  <select class="sel2" onchange="changeWndNum(this.value);">
                    <option value="1">1x1</option>
                    <option value="2" >2x2</option>
                    <option value="3" selected>3x3</option>
                    <option value="4">4x4</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td colspan="4">
                  <input type="button" class="btn" value="登录" @click="clickLogin();" />
                  <input type="button" class="btn" value="退出" onclick="clickLogout();" />
                  <input type="button" class="btn2" value="获取基本信息" onclick="clickGetDeviceInfo();" />
                  <input type="button" class="btn2" value="全部预览" @click="clickStartAllRealPlay();" />
                  <input type="button" class="btn2" value="全部停止" onclick="clickStopAllRealPlay();" />
                </td>
              </tr>
              <tr>
                <td class="tt">已登录设备</td>
                <td>
                  <select id="ip" class="sel" onchange="getChannelInfo();"></select>
                </td>
                <td class="tt">通道列表</td>
                <td>
                  <select id="channels" class="sel"></select>
                </td>
              </tr>
            </table>
          </fieldset>
          <fieldset class="ipchannel"  style="display: none">
            <legend>数字通道</legend>
            <table width="100%" cellpadding="0" cellspacing="3" border="0">
              <tr>
                <td><input type="button" class="btn" value="获取数字通道列表" onclick="clickGetDigitalChannelInfo();" /></td>
              </tr>
              <tr>
                <td>
                  <div class="digitaltdiv">
                    <table id="digitalchannellist" class="digitalchannellist" cellpadding="0" cellspacing="0" border="0"></table>
                  </div>
                </td>
              </tr>
            </table>
          </fieldset>
          <fieldset class="localconfig"  style="display: none">
            <legend>本地配置</legend>
            <table cellpadding="0" cellspacing="3" border="0">
              <tr>
                <td class="tt">播放性能</td>
                <td>
                  <select id="netsPreach" name="netsPreach" class="sel">
                    <option value="0">最短延时</option>
                    <option value="1">实时性好</option>
                    <option value="2">均衡</option>
                    <option value="3">流畅性好</option>
                  </select>
                </td>
                <td class="tt">图像尺寸</td>
                <td>
                  <select id="wndSize" name="wndSize" class="sel">
                    <option value="0">充满</option>
                    <option value="1">4:3</option>
                    <option value="2">16:9</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td class="tt">规则信息</td>
                <td>
                  <select id="rulesInfo" name="rulesInfo" class="sel">
                    <option value="1">启用</option>
                    <option value="0">禁用</option>
                  </select>
                </td>
                <td class="tt">抓图文件格式</td>
                <td>
                  <select id="captureFileFormat" name="captureFileFormat" class="sel">
                    <option value="0">JPEG</option>
                    <option value="1">BMP</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td class="tt">录像文件打包大小</td>
                <td>
                  <select id="packSize" name="packSize" class="sel">
                    <option value="0">256M</option>
                    <option value="1">512M</option>
                    <option value="2">1G</option>
                  </select>
                </td>
                <td class="tt">协议类型</td>
                <td>
                  <select id="protocolType" name="protocolType" class="sel">
                    <option value="0">TCP</option>
                    <option value="2">UDP</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td class="tt">录像文件保存路径</td>
                <td colspan="3"><input id="recordPath" type="text" class="txt" />&nbsp;<input type="button" class="btn" value="浏览" onclick="clickOpenFileDlg('recordPath', 0);" /></td>
              </tr>
              <tr>
                <td class="tt">回放下载保存路径</td>
                <td colspan="3"><input id="downloadPath" type="text" class="txt" />&nbsp;<input type="button" class="btn" value="浏览" onclick="clickOpenFileDlg('downloadPath', 0);" /></td>
              </tr>
              <tr>
                <td class="tt">预览抓图保存路径</td>
                <td colspan="3"><input id="previewPicPath" type="text" class="txt" />&nbsp;<input type="button" class="btn" value="浏览" onclick="clickOpenFileDlg('previewPicPath', 0);" /></td>
              </tr>
              <tr>
                <td class="tt">回放抓图保存路径</td>
                <td colspan="3"><input id="playbackPicPath" type="text" class="txt" />&nbsp;<input type="button" class="btn" value="浏览" onclick="clickOpenFileDlg('playbackPicPath', 0);" /></td>
              </tr>
              <tr>
                <td class="tt">回放剪辑保存路径</td>
                <td colspan="3"><input id="playbackFilePath" type="text" class="txt" />&nbsp;<input type="button" class="btn" value="浏览" onclick="clickOpenFileDlg('playbackFilePath', 0);" /></td>
              </tr>
              <tr>
                <td colspan="4"><input type="button" class="btn" value="获取" onclick="clickGetLocalCfg();" />&nbsp;<input type="button" class="btn" value="设置" onclick="clickSetLocalCfg();" /></td>
              </tr>
            </table>
          </fieldset>
        </div>
        <div class="left">
          <fieldset class="preview">
            <legend>预览</legend>
            <table cellpadding="0" cellspacing="3" border="0">
              <tr>
                <td class="tt">码流类型</td>
                <td>
                  <select id="streamtype" class="sel">
                    <option value="1">主码流</option>
                    <option value="2"  selected="selected">子码流</option>
                    <option value="3">第三码流</option>
                    <option value="4">转码码流</option>
                  </select>
                </td>
                <td>
                  <input type="button" class="btn" value="开始预览" @click="clickStartRealPlay();" />
                  <input type="button" class="btn" value="停止预览" onclick="clickStopRealPlay();" />
                </td>
              </tr>
              <tr>
                <td class="tt">音量</td>
                <td>
                  <input type="text" style="width: 50px" id="volume" class="txt" value="50" maxlength="3" />&nbsp;<input type="button" class="btn" value="设置" onclick="clickSetVolume();" />（范围：0~100）
                </td>
                <td>
                  <input type="button" class="btn" value="打开声音" onclick="clickOpenSound();" />
                  <input type="button" class="btn" value="关闭声音" onclick="clickCloseSound();" />
                </td>
              </tr>
              <tr>
                <td class="tt">对讲通道</td>
                <td>
                  <select id="audiochannels" class="sel">

                  </select>
                  <input type="button" class="btn" value="获取通道" onclick="clickGetAudioInfo();" />
                </td>
                <td>
                  <input type="button" class="btn" value="开始对讲" onclick="clickStartVoiceTalk();" />
                  <input type="button" class="btn" value="停止对讲" onclick="clickStopVoiceTalk();" />
                </td>
              </tr>
              <tr>
                <td colspan="3">
                  <input type="button" class="btn" value="抓图" onclick="clickCapturePic();" />
                  <input type="button" class="btn" value="开始录像" onclick="clickStartRecord();" />
                  <input type="button" class="btn" value="停止录像" onclick="clickStopRecord();" />
                </td>
              </tr>
              <tr>
                <td colspan="3">
                  <input type="button" class="btn2" value="启用电子放大" onclick="clickEnableEZoom();" />
                  <input type="button" class="btn2" value="禁用电子放大" onclick="clickDisableEZoom();" />
                  <input type="button" class="btn2" value="启用3D放大" onclick="clickEnable3DZoom();" />
                  <input type="button" class="btn2" value="禁用3D放大" onclick="clickDisable3DZoom();" />
                  <input type="button" class="btn" value="全屏" onclick="clickFullScreen();" />
                </td>
              </tr>
            </table>
          </fieldset>
          <fieldset class="ptz">
            <legend>云台控制</legend>
            <table cellpadding="0" cellspacing="3" border="0" class="left">
              <tr>
                <td>
                  <input type="button" class="btn" value="左上" onmousedown="mouseDownPTZControl(5);" onmouseup="mouseUpPTZControl();" />
                  <input type="button" class="btn" value="上" onmousedown="mouseDownPTZControl(1);" onmouseup="mouseUpPTZControl();" />
                  <input type="button" class="btn" value="右上" onmousedown="mouseDownPTZControl(7);" onmouseup="mouseUpPTZControl();" />
                </td>
              </tr>
              <tr>
                <td>
                  <input type="button" class="btn" value="左" onmousedown="mouseDownPTZControl(3);" onmouseup="mouseUpPTZControl();" />
                  <input type="button" class="btn" value="自动" onclick="mouseDownPTZControl(9);" />
                  <input type="button" class="btn" value="右" onmousedown="mouseDownPTZControl(4);" onmouseup="mouseUpPTZControl();" />
                </td>
              </tr>
              <tr>
                <td>
                  <input type="button" class="btn" value="左下" onmousedown="mouseDownPTZControl(6);" onmouseup="mouseUpPTZControl();" />
                  <input type="button" class="btn" value="下" onmousedown="mouseDownPTZControl(2);" onmouseup="mouseUpPTZControl();" />
                  <input type="button" class="btn" value="右下" onmousedown="mouseDownPTZControl(8);" onmouseup="mouseUpPTZControl();" />
                </td>
              </tr>
            </table>
            <table cellpadding="0" cellspacing="3" border="0" class="left">
              <tr>
                <td class="tt">云台速度</td>
                <td>
                  <select id="ptzspeed" class="sel">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option selected>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td class="tt">预置点号</td>
                <td><input id="preset" type="text" class="txt" value="1" /></td>
              </tr>
              <tr>
                <td colspan="2">
                  <input type="button" class="btn" value="设置" onclick="clickSetPreset();" />
                  <input type="button" class="btn" value="调用" onclick="clickGoPreset();" />
                </td>
              </tr>
            </table>
            <table cellpadding="0" cellspacing="3" border="0" class="left">
              <tr>
                <td class="tt"><input type="button" class="btn2" value="变倍+" onmousedown="PTZZoomIn()" onmouseup="PTZZoomStop()"></td>
                <td><input type="button" class="btn2" value="变倍-" onmousedown="PTZZoomout()" onmouseup="PTZZoomStop()"></td>
              </tr>
              <tr>
                <td class="tt"><input type="button" class="btn2" value="变焦+" onmousedown="PTZFocusIn()" onmouseup="PTZFoucusStop()"></td>
                <td><input type="button" class="btn2" value="变焦-" onmousedown="PTZFoucusOut()" onmouseup="PTZFoucusStop()"></td>
              </tr>
              <tr>
                <td class="tt"><input type="button" class="btn2" value="光圈+" onmousedown="PTZIrisIn()" onmouseup="PTZIrisStop()"></td>
                <td><input type="button" class="btn2" value="光圈-" onmousedown="PTZIrisOut()" onmouseup="PTZIrisStop()"></td>
              </tr>
            </table>
          </fieldset>
          <fieldset class="playback"  style="display: none">
            <legend>回放</legend>
            <table width="100%" cellpadding="0" cellspacing="3" border="0">
              <tr>
                <td class="tt">开始时间</td>
                <td>
                  <input id="starttime" type="text" class="txt" value="2013-12-10 00:00:00" />（时间格式：2013-11-11 12:34:56）
                </td>
              </tr>
              <tr>
                <td class="tt">结束时间</td>
                <td>
                  <input id="endtime" type="text" class="txt" value="2013-12-11 23:59:59" />
                  <input type="button" class="btn" value="搜索" onclick="clickRecordSearch(0);" />
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <div class="searchdiv">
                    <table id="searchlist" class="searchlist" cellpadding="0" cellspacing="0" border="0"></table>
                  </div>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <input type="button" class="btn2" value="开始回放" onclick="clickStartPlayback();" />
                  <input type="button" class="btn2" value="停止回放" onclick="clickStopPlayback();" />
                  <input type="button" class="btn" value="倒放" onclick="clickReversePlayback();" />
                  <input type="button" class="btn" value="单帧" onclick="clickFrame();" />
                  <input id="transstream" type="checkbox" class="vtop" />&nbsp;启用转码码流
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <input type="button" class="btn" value="暂停" onclick="clickPause();" />
                  <input type="button" class="btn" value="恢复" onclick="clickResume();" />
                  <input type="button" class="btn" value="慢放" onclick="clickPlaySlow();" />
                  <input type="button" class="btn" value="快放" onclick="clickPlayFast();" />
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <input type="button" class="btn" value="抓图" onclick="clickCapturePic();" />
                  <input type="button" class="btn2" value="开始剪辑" onclick="clickStartRecord();" />
                  <input type="button" class="btn2" value="停止剪辑" onclick="clickStopRecord();" />
                  <input type="button" class="btn2" value="OSD时间" onclick="clickGetOSDTime();" />&nbsp;<input id="osdtime" type="text" class="txt" readonly />
                </td>
              </tr>
            </table>
          </fieldset>
          <fieldset class="maintain"  style="display: none">
            <legend>系统维护</legend>
            <table width="100%" cellpadding="0" cellspacing="3" border="0">
              <tr>
                <td>
                  <input type="button" class="btn2" value="导出配置文件" onclick="clickExportDeviceConfig();" />
                  <input type="button" class="btn2" value="检查插件版本" onclick="clickCheckPluginVersion();" />
                  <input type="button" class="btn2" value="远程配置库" onclick="clickRemoteConfig();" />
                  <input type="button" class="btn2" value="恢复默认参数" onclick="clickRestoreDefault();" />
                </td>
              </tr>
              <tr>
                <td>
                  <input id="configFile" type="text" class="txt" />&nbsp;<input type="button" class="btn" value="浏览" onclick="clickOpenFileDlg('configFile', 1);" />&nbsp;<input type="button" class="btn2" value="导入配置文件" onclick="clickImportDeviceConfig();" />
                </td>
              </tr>
              <tr>
                <td>
                  <input id="upgradeFile" type="text" class="txt" />&nbsp;<input type="button" class="btn" value="浏览" onclick="clickOpenFileDlg('upgradeFile', 1);" />&nbsp;<input type="button" class="btn2" value="升级" onclick="clickStartUpgrade();" />
                </td>
              </tr>
            </table>
          </fieldset>
          <fieldset class="operate">
            <legend>操作信息</legend>
            <div id="opinfo" class="opinfo"></div>
          </fieldset>
          <fieldset class="callback"  style="display: none">
            <legend>事件回调信息</legend>
            <div id="cbinfo" class="cbinfo"></div>
          </fieldset>
        </div>
      </div>
    </div>

  </a-modal>
</template>

<script>
  import '@public/camera/js/jquery-1.7.1.min.js'
 import  '@public/camera/js/webVideoCtrl.js'
import remoteLoad from '@/utils/remoteLoad.js'
  export default {
    name: "CameraModal",
    data () {
      return {
        title:"视频监控",
        visible: false,
        model: {},
        confirmLoading: false,
        g_iWndIndex:0,//当前选中的窗口
        windowarray:{},//放置全局已经在播放的窗口
        dragdemo:null,
        message:null
      }
    },
    methods: {
      adddata(){
        let that =this;
        // 检查插件是否已经安装过
        if (-1 == I_CheckPluginInstall()) {
          alert("您还未安装过插件，双击开发包目录里的WebComponents.exe安装！");
          return;
        }

        // 初始化插件参数及插入插件
        I_InitPlugin(500, 300, {
          iWndowType: 3,
          cbSelWnd: function (xmlDoc) {
            that.g_iWndIndex = $(xmlDoc).find("SelectWnd").eq(0).text();
            let szInfo = "当前选择的窗口编号：" + that.g_iWndIndex;
            alert(szInfo)
            that.showCBInfo(szInfo);
          }
        });
        var ss = I_InsertOBJECTPlugin("divPlugin");
        // 检查插件是否最新
        if (-1 == I_CheckPluginVersion()) {
          alert("检测到新的插件版本，双击开发包目录里的WebComponents.exe升级！");
          return;
        }

        // 窗口事件绑定
        $(window).bind({
          resize: function () {
            var $Restart = $("#restartDiv");
            if ($Restart.length > 0) {
              var oSize = getWindowSize();
              $Restart.css({
                width: oSize.width + "px",
                height: oSize.height + "px"
              });
            }
          }
        });

        //初始化日期时间
        var szCurTime = this.dateFormat(new Date(), "yyyy-MM-dd");
        $("#starttime").val(szCurTime + " 00:00:00");
        $("#endtime").val(szCurTime + " 23:59:59");
      },
      // 显示操作信息
      showOPInfo(szInfo) {
        szInfo = "<div>" + this.dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") + " " + szInfo + "</div>";
        $("#opinfo").html(szInfo + $("#opinfo").html());
      },
      // 显示回调信息
       showCBInfo(szInfo) {
    szInfo = "<div>" + this.dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") + " " + szInfo + "</div>";
    $("#cbinfo").html(szInfo + $("#cbinfo").html());
  },
      // 登录
      clickLogin() {
        let that  =this;
    var szIP = "1t71g63874.imwork.net",
      szPort = "13690",
      szUsername = "admin",
      szPassword = "a123456789";

    if ("" == szIP || "" == szPort) {
      return;
    }

    var iRet = WebVideoCtrl.I_Login(szIP, 1, szPort, szUsername, szPassword, {
      success: function (xmlDoc) {
        alert("登陆成功");
        that.showOPInfo(szIP + " 登录成功！");
        $("#ip").prepend("<option value='" + szIP + "'>" + szIP + "</option>");
        setTimeout(function () {
          $("#ip").val(szIP);
          that.getChannelInfo();
        }, 10);
      },
      error: function () {
        that.showOPInfo(szIP + " 登录失败！");
      }
    });

    if (-1 == iRet) {
      that.showOPInfo(szIP + " 已登录过！");
    }
  },
   // 显示回调信息
   showCBInfo(szInfo) {
    szInfo = "<div>" + this.dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") + " " + szInfo + "</div>";
    $("#cbinfo").html(szInfo + $("#cbinfo").html());
  },
      // 格式化时间
      dateFormat(oDate, fmt) {
    var o = {
      "M+": oDate.getMonth() + 1, //月份
      "d+": oDate.getDate(), //日
      "h+": oDate.getHours(), //小时
      "m+": oDate.getMinutes(), //分
      "s+": oDate.getSeconds(), //秒
      "q+": Math.floor((oDate.getMonth() + 3) / 3), //季度
      "S": oDate.getMilliseconds()//毫秒
    };
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (oDate.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    for (var k in o) {
      if (new RegExp("(" + k + ")").test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
      }
    }
    return fmt;
  },
      add (record) {
        this.visible = true;
       this.adddata();
        this.model = Object.assign({}, record);
/*        alert(this.model.loginIp);*/
      },
      close () {
        this.visible = false;
      },
      handleCancel () {
        this.close()
      },
      handleOk () {
        this.close()
      },
      // 显示操作信息
      showOPInfo(szInfo) {
        szInfo = "<div>" + this.dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") + " " + szInfo + "</div>";
        $("#opinfo").html(szInfo + $("#opinfo").html());
      },
      // 显示回调信息
       showCBInfo(szInfo) {
        szInfo = "<div>" + this.dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") + " " + szInfo + "</div>";
        $("#cbinfo").html(szInfo + $("#cbinfo").html());
      },
      // 格式化时间
       dateFormat(oDate, fmt) {
        let o = {
         "M+": oDate.getMonth() + 1, //月份
         "d+": oDate.getDate(), //日
         "h+": oDate.getHours(), //小时
         "m+": oDate.getMinutes(), //分
         "s+": oDate.getSeconds(), //秒
         "q+": Math.floor((oDate.getMonth() + 3) / 3), //季度
         "S": oDate.getMilliseconds()//毫秒
       };
        if (/(y+)/.test(fmt)) {
         fmt = fmt.replace(RegExp.$1, (oDate.getFullYear() + "").substr(4 - RegExp.$1.length));
       }
        for (var k in o) {
         if (new RegExp("(" + k + ")").test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
       }
      }
       return fmt;
 },
      // 获取通道
      getChannelInfo() {
        let that =this;
        alert("获取通道方法开启");
    var szIP = $("#ip").val(),
      oSel = $("#channels").empty(),
      nAnalogChannel = 0;

    if ("" == szIP) {
      return;
    }

    // 模拟通道
    I_GetAnalogChannelInfo(szIP, {
      async: false,
      success: function (xmlDoc) {
        var oChannels = $(xmlDoc).find("VideoInputChannel");
        nAnalogChannel = oChannels.length;

        $.each(oChannels, function (i) {
          var id = parseInt($(this).find("id").eq(0).text(), 10),
            name = $(this).find("name").eq(0).text();
          if ("" == name) {
            name = "Camera " + (id < 9 ? "0" + id : id);
          }
          oSel.append("<option value='" + id + "' bZero='false'>" + name + "</option>");
        });
        that.showOPInfo(szIP + " 获取模拟通道成功！");
      },
      error: function () {
        that.showOPInfo(szIP + " 获取模拟通道失败！");
      }
    });
    // 数字通道
    I_GetDigitalChannelInfo(szIP, {
      async: false,
      success: function (xmlDoc) {
        var oChannels = $(xmlDoc).find("InputProxyChannelStatus");

        $.each(oChannels, function (i) {
          var id = parseInt($(this).find("id").eq(0).text(), 10),
            name = $(this).find("name").eq(0).text(),
            online = $(this).find("online").eq(0).text();
          if ("false" == online) {// 过滤禁用的数字通道
            return true;
          }
          if ("" == name) {
            name = "IPCamera " + ((id - nAnalogChannel) < 9 ? "0" + (id - nAnalogChannel) : (id - nAnalogChannel));
          }
          oSel.append("<option value='" + id + "' bZero='false'>" + name + "</option>");
        });
        that.showOPInfo(szIP + " 获取数字通道成功！");
      },
      error: function () {
        that.showOPInfo(szIP + " 获取数字通道失败！");
      }
    });
    // 零通道
    I_GetZeroChannelInfo(szIP, {
      async: false,
      success: function (xmlDoc) {
        var oChannels = $(xmlDoc).find("ZeroVideoChannel");

        $.each(oChannels, function (i) {
          var id = parseInt($(this).find("id").eq(0).text(), 10),
            name = $(this).find("name").eq(0).text();
          if ("" == name) {
            name = "Zero Channel " + (id < 9 ? "0" + id : id);
          }
          if ("true" == $(this).find("enabled").eq(0).text()) {// 过滤禁用的零通道
            oSel.append("<option value='" + id + "' bZero='true'>" + name + "</option>");
          }
        });
        that.showOPInfo(szIP + " 获取零通道成功！");
      },
      error: function () {
        that.showOPInfo(szIP + " 获取零通道失败！");
      }
    });
  },
      // 全部预览
      clickStartAllRealPlay() {
        alert("全部开始预览");
        let that =this;
    var j=0;
    for (var i = 0; i < $("#channels option").length; i++) {
      alert($("#channels option").length);
      var oWndInfo = I_GetWindowStatus(i);
         alert("oWndInfo===="+oWndInfo);
      var szIP = $("#ip").val(),
        iStreamType = parseInt($("#streamtype").val(), 10),
        iChannelID = parseInt($("#channels").val(), 10),
        bZeroChannel = $("#channels option").eq($("#channels").get(0).selectedIndex).attr("bZero") == "true" ? true : false,
        szInfo = "";

      if ("" == szIP) {
        return;
      }

      if (oWndInfo != null) {// 已经在播放了，先停止
        I_Stop();
      }
      alert("szIP==="+szIP+"====iStreamType===="+iStreamType+"====iChannelID===="+iChannelID+"====bZeroChannel===="+bZeroChannel);
      var iRet = I_StartRealPlay(szIP, {
        iWndIndex: i,
        iStreamType: iStreamType,
        iChannelID: i,
        bZeroChannel: bZeroChannel
      });
alert("iRetiRetiRetiRet=="+iRet);
      if (0 == iRet) {
        szInfo = "开始预览成功！";
        that.windowarray[j] =i;
        j++;
      } else {
        szInfo = "开始预览失败！";
      }

      that.showOPInfo(szIP + " " + szInfo);
    }

  },
      // 开始预览
      clickStartRealPlay() {
        alert("开始预览");
        let that =this;
    var oWndInfo = I_GetWindowStatus(that.g_iWndIndex),
      szIP = $("#ip").val(),
      iStreamType = parseInt($("#streamtype").val(), 10),
      iChannelID = parseInt($("#channels").val(), 10),
      bZeroChannel = $("#channels option").eq($("#channels").get(0).selectedIndex).attr("bZero") == "true" ? true : false,
      szInfo = "";

    if ("" == szIP) {
      return;
    }

    if (oWndInfo != null) {// 已经在播放了，先停止
      I_Stop();
    }
alert("szIP=="+szIP+"=====iStreamType====="+iStreamType+"===iChannelID==="+iChannelID+"===bZeroChannel==="+bZeroChannel);
    var iRet = I_StartRealPlay(szIP, {
      iStreamType: iStreamType,
      iChannelID: iChannelID,
      bZeroChannel: bZeroChannel
    });

    if (0 == iRet) {
      szInfo = "开始预览成功！";
    } else {
      szInfo = "开始预览失败！";
    }

    that.showOPInfo(szIP + " " + szInfo);
  }
    },
     created () {
       /*  remoteLoad('camera/js/jquery-1.7.1.min.js');*/
      /* remoteLoad('<%=BASE_URL%>camera/js/jquery-1.7.1.min.js');
       remoteLoad('<%=BASE_URL%>camera/js/webVideoCtrl.js');*/
    }
  }
</script>
<style scoped>
  *
  {
    margin:0;
    padding:0;
  }
  .html
  {
    width:1000px;
    height:800px;
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
    -webkit-text-size-adjust:none;
    background:#FFFFFF;
  }
  .body
  {
    padding:5px;
  }
  select
  {
    height:20px;
    line-height:20px;
  }
  .left
  {
    float:left;
  }
  .freeze
  {
    position:absolute;
    text-align:center;
    background:#343434;
    color:#FFFFFF;
    font-size:26px;
    font-weight:bold;
    filter:alpha(opacity=60);
    opacity:0.6;
  }
  .vtop
  {
    vertical-align:middle;
    margin-top:-1px;
  }
  /*插件*/
  .plugin
  {
    width:500px;
    height:300px;
  }
  fieldset
  {
    display:block;
  }
  /*本地配置*/
  .localconfig
  {
    width:480px;
    padding:10px;
    border:1px solid #7F9DB9;
  }
  .localconfig .tt
  {
    width:125px;
  }
  .localconfig .txt
  {
    width:310px;
  }
  .localconfig .btn
  {
    width:45px;
    height:22px;
    line-height:18px;
  }
  .localconfig .sel
  {
    width:120px;
  }
  /*登录*/
  .login
  {
    width:480px;
    padding:10px;
    border:1px solid #7F9DB9;
  }
  .login .tt
  {
    width:100px;
  }
  .login .txt
  {
    width:130px;
  }
  .login .btn
  {
    width:45px;
    height:22px;
    line-height:18px;
  }
  .login .btn2
  {
    width:100px;
    height:22px;
    line-height:18px;
  }
  .login .sel
  {
    width:130px;
  }
  .login .sel2
  {
    width:65px;
  }
  /*数字通道*/
  .ipchannel
  {
    width:480px;
    padding:10px;
    border:1px solid #7F9DB9;
  }
  .ipchannel .btn
  {
    width:130px;
    height:22px;
    line-height:18px;
  }
  .ipchannel .digitaltdiv
  {
    height:100px;
    overflow:hidden;
    overflow-y:auto;
    border:1px solid #7F9DB9;
    font-size:11px;
  }
  .ipchannel .digitalchannellist th, .ipchannel .digitalchannellist td
  {
    padding:2px;
    border:1px solid #7F9DB9;
    border-collapse:collapse;
    white-space:nowrap;
  }
  /*预览*/
  .preview
  {
    width:450px;
    padding:10px;
    padding-top:0;
    margin-left:10px;
    border:1px solid #7F9DB9;
  }
  .preview .tt
  {
    width:60px;
  }
  .preview .txt
  {
    width:30px;
  }
  .preview .btn
  {
    width:70px;
    height:22px;
    line-height:18px;
  }
  .preview .btn2
  {
    width:90px;
    height:22px;
    line-height:18px;
  }
  .preview .sel
  {
    width:105px;
  }
  /*云台*/
  .ptz
  {
    width:450px;
    padding:10px;
    margin-left:10px;
    border:1px solid #7F9DB9;
  }
  .ptz .tt
  {
    width:60px;
  }
  .ptz .txt
  {
    width:60px;
  }
  .ptz .btn
  {
    width:45px;
    height:22px;
    line-height:18px;
  }
  .ptz .btn2
  {
    width:60px;
    height:22px;
    line-height:18px;
  }
  .ptz .sel
  {
    width:65px;
  }
  /*视频参数*/
  .videoparam
  {
    width:450px;
    padding:10px;
    margin-left:10px;
    border:1px solid #7F9DB9;
  }
  .videoparam .tt
  {
    width:60px;
  }
  .videoparam .txt
  {
    width:60px;
  }
  .videoparam .btn
  {
    width:45px;
    height:22px;
    line-height:18px;
  }
  .videoparam .sel
  {
    width:65px;
  }
  /*回放*/
  .playback
  {
    width:450px;
    padding:10px;
    margin-left:10px;
    border:1px solid #7F9DB9;
  }
  .playback .tt
  {
    width:60px;
  }
  .playback .txt
  {
    width:140px;
  }
  .playback .btn
  {
    width:45px;
    height:22px;
    line-height:18px;
  }
  .playback .btn2
  {
    width:70px;
    height:22px;
    line-height:18px;
  }
  .playback .sel
  {
    width:65px;
  }
  .playback .searchdiv
  {
    height:100px;
    overflow:hidden;
    overflow-y:auto;
    border:1px solid #7F9DB9;
    font-size:11px;
  }
  .playback .searchlist th, .playback .searchlist td
  {
    padding:2px;
    border:1px solid #7F9DB9;
    border-collapse:collapse;
    white-space:nowrap;
  }
  /*系统维护*/
  .maintain
  {
    width:450px;
    padding:10px;
    margin-left:10px;
    border:1px solid #7F9DB9;
  }
  .maintain .tt
  {
    width:60px;
  }
  .maintain .txt
  {
    width:280px;
  }
  .maintain .btn
  {
    width:45px;
    height:22px;
    line-height:18px;
  }
  .maintain .btn2
  {
    width:100px;
    height:25px;
    line-height:18px;
  }
  .maintain .sel
  {
    width:65px;
  }
  /*操作信息*/
  .operate
  {
    width:450px;
    padding:10px;
    margin-left:10px;
    border:1px solid #7F9DB9;
  }
  .operate .opinfo
  {
    height:150px;
    border:1px solid #7F9DB9;
    overflow:auto;
  }
  /*事件回调*/
  .callback
  {
    width:450px;
    padding:10px;
    margin-left:10px;
    border:1px solid #7F9DB9;
  }
  .callback .cbinfo
  {
    height:114px;
    border:1px solid #7F9DB9;
    overflow:auto;
  }
  /*IP解析*/
  .ipparse
  {
    width:480px;
    padding:10px;
    border:1px solid #7F9DB9;
  }
  .ipparse .tt
  {
    width:100px;
  }
  .ipparse .txt
  {
    width:130px;
  }
  .ipparse .btn
  {
    width:90px;
    height:22px;
    line-height:18px;
  }
  .ipparse .sel
  {
    width:130px;
  }
</style>